<template>
    <h1>这是vuex界面</h1>
    <p>count:{{ count }}</p>
    <p>tenTimes:{{ tenTimes }}</p>
    <h1>命名空间</h1>
    <p>无命名空间</p>
    <p>访问 模块A中的state数据: {{ $store.state.a.countA }}</p>
    <p>访问 模块A中的getter数据: {{ $store.getters.a.countA }}</p>
    <p>有命名空间</p>
    <p>访问 模块B中的state数据: {{ $store.state.b.countB }}</p>
    <p>访问 模块B中的state数据: {{ $store.getters['b/countBB'] }}</p>

    <h1>MapXX方法</h1>
    <h2>全局</h2>
    <p>state</p>
    <p>count:{{ count }}</p>
    <p>getter</p>
    <p>tenTimes:{{ tenTimes }}</p>
    <p>count:{{ countAA }}</p>
    <button @click="emitIncrementMut"></button>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex';
export default {
    computed: {
        //     count() {
        //         return this.$store.state.count
        //     },
        //     tenTimes() {
        //         return this.$store.getters.tenTimes
        //     }
        ...mapState(['count']),
        ...mapGetters(['tenTimes', 'countAA'])
    },
    methods: {
        ...mapMutations(['incrementMut'])
    }

}
</script>
<style scoped></style>